<template>
  <div>
    <div class="headerTitle">
      <!-- <div class="titltOne">
            <div class="images">
              <img src="../../../assets/images/totalStorage.png" alt="">
            </div>
            <div class="headerRight">
                 <div class="headerRightNum">34.5GB</div>
                 <div>数据中心当前存储总量</div>
            </div>
          </div>
          <div class="titltOne">
           <div class="images">
             <img src="../../../assets/images/generalWarehouse.png" alt="">
           </div>
           <div class="headerRight">
             <div class="headerRightNum">34.5GB</div>
             <div>数据中心当前存储总量</div>
           </div>
         </div>
          <div class="titltOne">
           <div class="images">
             <img src="../../../assets/images/totalScripts.png" alt="">
           </div>
           <div class="headerRight">
             <div class="headerRightNum">34.5GB</div>
             <div>数据中心当前存储总量</div>
           </div>
         </div> -->
    </div>
    <div class="centenBody">
      <el-row class="centenBodyLineOne">
        <el-col :span="8">
          <el-Card class="centenBodyLineOneCard">
            <div class="centenBodyLineOneCard">
              <div class="centenBodyLineOneCardTitle">724台-短波发射台</div>
              <div class="LineOneCardTitlebody">
                <div class="Titlebodyleft">
                  <div class="leftImg"></div>
                </div>
                <div class="Titlebodycenter">
                  <ul>
                    <li>
                      <span>发射机数：</span>
                      <span class="valueColor">15台</span>
                    </li>
                    <li>
                      <span>发射机总功率：</span>
                      <span>2200kW</span>
                    </li>
                    <li>
                      <span>天线数：</span>
                      <span class="valueColor">20部</span>
                    </li>
                    <li>
                      <span>业务人员：</span>
                      <span>65（共123人）</span>
                    </li>
                    <li>
                      <span>高级工程师：</span>
                      <span>4人</span>
                    </li>
                    <li>
                      <span>播出任务：</span>
                      <span class="valueColor">32套节目 23个频率</span>
                    </li>
                  </ul>
                </div>
                <!-- <div class="Titlebodyright">
                  <ul>
                    <li>
                      <span>今年累计播出时长：</span>
                      <span>22342小时</span>
                    </li>
                    <li>
                      <span>优于计划：</span>
                      <span>98.98%</span>
                    </li>
                    <li>
                      <span>播出可用度：</span>
                      <span>98.767675%</span>
                    </li>
                    <li>
                      <span>今年累计停播时长：</span>
                      <span>320秒</span>
                    </li>
                    <li>
                      <span>停播率：</span>
                      <span>3.2（秒/百小时）</span>
                    </li>
                    <li>
                      <span>今年累计接收调度令：</span>
                      <span class="valueColor">324条</span>
                    </li>
                  </ul>
                </div> -->
              </div>
            </div>
          </el-Card>
        </el-col>
        <el-col :span="8">
          <el-Card class="centenBodyLineOneCard centenBodyLineOneCardCenter">
            <div class="centenBodyLineOneCard">
              <div class="centenBodyLineOneCardTitle">各机房总播出时长</div>
              <!--                    <ColumnDiagramPackaging :id="'mapNum'" :data="mapList" :style="{width:'100%',height:'400px'}"></ColumnDiagramPackaging>-->
              <ColumnDiagramPackaging
                :id="'mapNum'"
                :data="timeDayList"
                :style="{ width: '100%', height: '350px' }"
              ></ColumnDiagramPackaging>
            </div>
          </el-Card>
        </el-col>
        <el-col :span="4">
          <el-Card class="centenBodyLineOneCard" style="margin-right: 20px">
            <div class="centenBodyLineOneCard">
              <div class="centenBodyLineOneCardTitle">全台播出时长分布</div>
              <ColumnDiagramPackaging
                :id="'bookNum'"
                :data="bookNumList"
                :style="{ width: '100%', height: '350px' }"
              ></ColumnDiagramPackaging>
            </div>
          </el-Card>
        </el-col>
        <el-col :span="4">
          <el-Card class="centenBodyLineOneCard">
            <div class="centenBodyLineOneCard">
              <div class="centenBodyLineOneCardTitle">全台播出任务类别</div>
              <ColumnDiagramPackaging
                :id="'bookNumTwo'"
                :data="bookNumListTwo"
                :style="{ width: '100%', height: '350px' }"
              ></ColumnDiagramPackaging>
            </div>
          </el-Card>
        </el-col>
      </el-row>
      <el-row class="centenBodyLineTwo">
        <el-col :span="8">
          <el-Card class="centenBodyLineOneCard">
            <div class="centenBodyLineOneCard">
              <div class="centenBodyLineOneCardTitle">
                全台播出时长同比&环比速度
              </div>
              <ColumnDiagramPackaging
                :id="'duChart'"
                :data="pieData"
                :style="{ width: '100%', height: '350px' }"
              ></ColumnDiagramPackaging>
            </div>
          </el-Card>
        </el-col>
        <el-col :span="8">
          <el-Card class="centenBodyLineOneCard centenBodyLineOneCardCenter">
            <div class="centenBodyLineOneCard">
              <div class="centenBodyLineOneCardTitle">各发射机播出时长排名</div>
              <ColumnDiagramPackaging
                :id="'bargragh'"
                :data="barData"
                :style="{ width: '100%', height: '350px' }"
              ></ColumnDiagramPackaging>
            </div>
          </el-Card>
        </el-col>
        <el-col :span="8">
          <el-row style="margin-bottom:20px">
            <el-col :span="24">
              <el-Card class="centenBodyLineOneCard" style="height:190px">
                <div>
                  <div class="centenBodyLineOneCardTitle">台站播出成级</div>

                  <ColumnDiagramPackaging
                :id="'jobExecution'"
                :data="lineMovList"
                :style="{ width: '100%', height: '120px' }"
              ></ColumnDiagramPackaging>
                </div>
              </el-Card>
            </el-col>
          </el-row>
           <el-row>
            <el-col :span="24">
              <el-Card class="centenBodyLineOneCard" style="height:190px">
                <div>
                  <div class="centenBodyLineOneCardTitle">全台任务完成情况</div>
                   <el-table :data="quantaiList" height="110">
                        <el-table-column
                            prop="jifang"
                            label="机房"
                            align="center"
                            >
                        </el-table-column>
                            <el-table-column
                            prop="jihua"
                            label="计划任务数"
                            align="center"
                            >
                        </el-table-column>
                            <el-table-column
                            prop="shiji"
                            label="实际任务数"
                            align="center"
                            >
                        </el-table-column>
                            <el-table-column
                            prop="wancheng"
                            label="完成率"
                            align="center"
                            >
                        </el-table-column>
                   </el-table>
                </div>
              </el-Card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import ColumnDiagramPackaging from "@/components/Wuxianju/ColumnDiagramPackaging";
import "echarts/map/js/china.js";
export default {
  name: "index",
  components: {
    ColumnDiagramPackaging,
  },
  // filters:{
  //     dateFormate(value){
  //         const dt = new Date(value);
  //         const h  = (dt.getHours()+'').padStart(2,'0')
  //         return `${h}h`
  //     }
  // },
  data() {
    return {
      TitlebodycenterList: [
        {
          name: "",
        },
      ],
      timeDayList: {
        axisLabel: {
          color: "#1E1E1E",
          fontWeight: "bold",
          fontSize: 12,
        },
        textStyle: {
          color: "#1E1E1E",
          fontWeight: "bold",
          fontSize: 12,
        },
        legend: [
          {
            //   data: ['发射机秒数据','机房环境' ],
            //   icon:'circle',
            //   x:'right',
            //   formatter: ["{a|{name}}"].join("\n"),
            //   textStyle: {
            //       rich: {
            //           a: {
            //               width: 68
            //           }
            //       }
            //   },
          },
        ],
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          boundaryGap: false,
          data: ["1-01", "1-02", "1-03", "1-04", "1-05", "1-06", "1-07"],
        },
        yAxis: {
          name: "（小时）",
          type: "value",
          axisLine: {
            show: true,
          },
          nameTextStyle: {
            color: "#1E1E1E",
            fontWeight: "bold",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "乙机房",
            symbolSize: 10, // 设置折线上圆点大小
            symbol: "circle", // 设置拐点为实心圆
            data: [220, 902, 230, 934, 240, 888, 250],
            type: "line",
            stack: "Total",
            // smooth: true,
            itemStyle: {
              color: "#1374F8",
            },
          },
          {
            name: "丙机房",
            symbolSize: 10, // 设置折线上圆点大小
            symbol: "circle", // 设置拐点为实心圆
            data: [220, 902, 230, 934, 240, 888, 250],
            type: "line",
            stack: "Total",
            // smooth: true,
            itemStyle: {
              color: "#15ED71",
            },
          },
          {
            name: "丁机房",
            symbolSize: 10, // 设置折线上圆点大小
            symbol: "circle", // 设置拐点为实心圆
            data: [220, 902, 230, 934, 240, 888, 250],
            type: "line",
            stack: "Total",
            // smooth: true,
            itemStyle: {
              color: "#FEB11C",
            },
          },
        ],
      },
      lineDayList: {
        axisLabel: {
          color: "#1E1E1E",
          fontWeight: "bold",
          fontSize: 12,
        },
        textStyle: {
          color: "#1E1E1E",
          fontWeight: "bold",
          fontSize: 12,
        },
        legend: [
          {
            data: ["ODS层：mongoDB"],
            icon: "circle",
            x: "right",
          },
          {
            data: ["DW层：kudu"],
            icon: "circle",
            // x:'right',
            top: "6%",
            right: "7%",
          },
        ],
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          boundaryGap: false,
          data: ["1-01", "1-02", "1-03", "1-04", "1-05", "1-06", "1-07"],
        },
        yAxis: {
          name: "（MB）",
          type: "value",
          axisLine: {
            show: true,
          },
          nameTextStyle: {
            color: "#1E1E1E",
            fontWeight: "bold",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "ODS层：mongoDB",
            symbolSize: 0, // 设置折线上圆点大小
            symbol: "circle", // 设置拐点为实心圆
            data: [920, 702, 601, 934, 1090, 1130, 1020],
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#3FAAF4",
            },
            areaStyle: {
              color: "#1F72F0",
            },
          },
          {
            name: "DW层：kudu",
            symbolSize: 0, // 设置折线上圆点大小
            symbol: "circle", // 设置拐点为实心圆
            data: [820, 802, 1000, 934, 1190, 1220, 1320],
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#FF9042",
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: "rgba(48, 131, 255, 0.4)",
                  },
                  {
                    offset: 1,
                    color: "rgba(36, 101, 234, 0.1)",
                  },
                ],
                false
              ),
            },
          },
        ],
      },
      mapList: {
        title: {
          text: "123",
        },
        series: [
          {
            type: "map",
            map: "china",
            label: {
              show: true,
              fontSize: 10,
            },
            zoom: 1.3,
            emphasis: {
              label: {
                color: "#fff",
              },
              itemStyle: {
                areaColor: "#83b541",
              },
            },
          },
        ],
      },
      bookNumList: {
        color: [
          "#1374F8",
          "#55D4FE",
          "#13EBF8",
          "#15ED71",
          "#15B3ED",
          "#FEB11C",
        ],
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            radius: ["65%", "80%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "2019-01" },
              { value: 735, name: "2019-02" },
              { value: 580, name: "2019-03" },
              { value: 484, name: "2019-04" },
              { value: 300, name: "2019-05" },
            ],
            type: "pie",
          },
        ],
      },
      bookNumListTwo: {
        color: ["#1374F8", "#FEB11C", "#15B3ED"],
        legend: {
          top: "5%",
          left: "center",
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "45%",
            style: {
              text: "播出总时长\n   \n",
              textAlign: "center",
              fill: "#000",
              width: 30,
              height: 30,
            },
          },
          {
            type: "text",
            left: "center",
            top: "50%",
            style: {
              text: "33423小时\n  \n",
              textAlign: "center",
              fill: "#000",
              width: 30,
              height: 30,
            },
          },
        ],
        series: [
          {
            radius: ["55%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            // label: {
            //   show: false,
            //   position: "center",
            // },
            label: {
              formatter: "{name|{b}}\n\n",
              padding: [0, -40],
              rich: {
                b: {
                  fontSize: 10,
                  color: "#999",
                  lineHeight: 1,
                },
                per: {
                  fontSize: 20,
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: "40",
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              length: 20,
              length2: 40,
              maxSurfaceAngle: 90,
            },
            data: [
              { value: 1048, name: "实验" },
              { value: 735, name: "对内广播" },
              { value: 580, name: "对外广播" },
            ],
            type: "pie",
          },
        ],
      },
      pieData: {
        axisLabel: {
          color: "#1E1E1E",
          fontWeight: "bold",
          fontSize: 12,
        },
        textStyle: {
          color: "#1E1E1E",
          fontWeight: "bold",
          fontSize: 12,
        },
        legend: [
          {
            //   data: ['发射机秒数据','机房环境' ],
            //   icon:'circle',
            //   x:'right',
            //   formatter: ["{a|{name}}"].join("\n"),
            //   textStyle: {
            //       rich: {
            //           a: {
            //               width: 68
            //           }
            //       }
            //   },
          },
        ],
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          boundaryGap: false,
          data: ["1-01", "1-02", "1-03", "1-04", "1-05", "1-06", "1-07"],
        },
        yAxis: {
          name: "（小时）",
          type: "value",
          axisLine: {
            show: true,
          },
          nameTextStyle: {
            color: "#1E1E1E",
            fontWeight: "bold",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "环比增数",
            symbolSize: 10, // 设置折线上圆点大小
            symbol: "circle", // 设置拐点为实心圆
            data: [220, 902, 230, 934, 240, 888, 250],
            type: "line",
            stack: "Total",
            // smooth: true,
            itemStyle: {
              color: "#1374F8",
            },
          },
          {
            name: "同比增数",
            symbolSize: 10, // 设置折线上圆点大小
            symbol: "circle", // 设置拐点为实心圆
            data: [220, 902, 230, 934, 240, 888, 250],
            type: "line",
            stack: "Total",
            // smooth: true,
            itemStyle: {
              color: "#15ED71",
            },
          },
        ],
      },
      barData: {
        tooltip: {
          trigger: "axis",
          show: false,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "1%",
          right: "5%",
          // bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          min: 0,
          max: 1602,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: true,
            textStyle: {
              color: "none",
            },
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            // inverse: true,
            data: ["乙01", "乙01", "乙01", "丁01", "丁03"],
            axisLabel: {
              color: "#1E1E1E",
              fontWeight: "bold",
              fontSize: 16,
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 10, // 柱子宽度
            label: {
              show: true,
              position: "top",
              formatter: function (params) {
                var sum = 0;
                var data = [123, 234, 456, 666, 123];
                var arr = data;
                for (var i = 0; i < arr.length; i++) {
                  sum += arr[i];
                }
                return ((params.value / sum) * 100).toFixed(2) + "%";
              },
            },
            itemStyle: {
              // barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
              barBorderRadius: 5,
              color: function (param) {
                var colorlist = [
                  "#2C82F7",
                  "#13EBF8 ",
                  "#55B5FF",
                  "00BFFE",
                  "#55D4FE",
                ];
                return colorlist[param.dataIndex];
              },
            },
            data: [123, 234, 456, 666, 123],
          },
        ],
      },
      durationList: {
        tooltip: {
          trigger: "axis",
          show: false,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "1%",
          right: "5%",
          // bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              textStyle: {
                color: "none",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            // splitLine: {
            //     show: false,
            // },
            // axisTick: {
            //     show: false,
            // },
            // axisLine: {
            //     //y轴
            //     show: false,
            // },
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            inverse: true,
            data: ["Top1", "Top2", "Top3", "Top4", "Top5"],
            axisLabel: {
              color: "#1E1E1E",
              fontWeight: "bold",
              fontSize: 16,
            },
          },
        ],
        series: [
          {
            type: "bar",
            stack: "total",
            showBackground: true,
            barWidth: 21, // 柱子宽度
            label: {
              show: true,
              position: "top", // 位置
              color: "#1E1E1E",
              fontSize: 12,
              distance: 5, // 距离
              formatter: function (c) {
                console.log(c, "ccc");
                const dt = new Date(c.value);
                const h = (dt.getHours() + "").padStart(1, "0");
                const min = (dt.getMinutes() + "").padStart(2, "0");
                return `${h}h${min}min`;
              }, // 这里是数据展示的时候显示的数据
            }, // 柱子上方的数值
            itemStyle: {
              // barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: "#55B5FF",
                  },
                  {
                    offset: 1,
                    color: "#55B5FF",
                  },
                ],
                false
              ), // 渐变
            },
            data: [12393293, 23431313, 45631313, 66631313, 12331313],
          },
        ],
      },
       lineMovList: {
        axisLabel: {
          color: "#1E1E1E",
          fontWeight: "bold",
          fontSize: 12,
        },
        textStyle: {
          color: "#1E1E1E",
          fontWeight: "bold",
          fontSize: 12,
        },
        grid:{
        top:'20%',
        bottom:'25%'
        },
        legend: [
          {
            //   data: ['发射机秒数据','机房环境' ],
            //   icon:'circle',
            //   x:'right',
            //   formatter: ["{a|{name}}"].join("\n"),
            //   textStyle: {
            //       rich: {
            //           a: {
            //               width: 68
            //           }
            //       }
            //   },
          },
        ],
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          boundaryGap: false,
          data: ["1-01", "1-02", "1-03", "1-04", "1-05", "1-06", "1-07"],
        },
        yAxis: {
          name: "（小时）",
          type: "value",
          axisLine: {
            show: true,
          },
          nameTextStyle: {
            color: "#1E1E1E",
            fontWeight: "bold",
            fontSize: 12,
          },
           splitNumber : 3,
        },
        series: [
          {
            name: "优于计划",
            symbolSize: 10, // 设置折线上圆点大小
            symbol: "circle", // 设置拐点为实心圆
            data: [220, 902, 230, 934, 240, 888, 250],
            type: "line",
            stack: "Total",
            // smooth: true,
            itemStyle: {
              color: "#1374F8",
            },
          },
          {
            name: "播出可用度",
            symbolSize: 10, // 设置折线上圆点大小
            symbol: "circle", // 设置拐点为实心圆
            data: [220, 902, 230, 934, 240, 888, 250],
            type: "line",
            stack: "Total",
            // smooth: true,
            itemStyle: {
              color: "#15ED71",
            },
          },
          {
            name: "停播率",
            symbolSize: 10, // 设置折线上圆点大小
            symbol: "circle", // 设置拐点为实心圆
            data: [220, 902, 230, 934, 240, 888, 250],
            type: "line",
            stack: "Total",
            // smooth: true,
            itemStyle: {
              color: "#FEB11C",
            },
          },
        ],
      },
      quantaiList:[
          {
            jifang:'乙机房',jihua:111,shiji:111,wancheng:'100%'
          },{
            jifang:'丙机房',jihua:121,shiji:111,wancheng:'100%'
          }, {
            jifang:'丁机房',jihua:131,shiji:111,wancheng:'100%'
          }, {
            jifang:'合计',jihua:131,shiji:111,wancheng:'100%'
          },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.headerTitle {
  height: 170px;
  display: flex;
  flex-direction: row;
  background-image: url("../../../assets/images/navGround.png");
  background-size: cover;
  .titltOne {
    display: flex;
    flex-direction: row;
    padding: 44px 117px 67px 71px;
    .headerRight {
      flex-direction: column;
      margin-left: 2px;
      vertical-align: middle;
      font-weight: normal;
      color: #4399fc;
      &Num {
        font-size: 26px;
        font-family: LcdD;
        font-weight: 400;
        color: #4399fc;
      }
    }
  }
}
.centenBody {
  padding: 20px 30px 30px;
  margin-top: -209px;
  .centenBodyLineOne {
    height: 400px;
    margin-top: 20px;
    .centenBodyLineOneCard {
      height: 400px;
      .centenBodyLineOneCardTitle {
        text-align: center;
        padding-top: 19px;
        padding-bottom: 19px;
        font-size: 16px;
        font-family: PingFang;
        font-weight: bold;
        color: #1e1e1e;
      }
    }
    .centenBodyLineOneCardCenter {
      margin: 0 20px;
    }
  }
  .centenBodyLineTwo {
    height: 400px;
    margin-top: 20px;
    .centenBodyLineOneCard {
      height: 400px;
      .centenBodyLineOneCardTitle {
        text-align: center;
        padding-top: 19px;
        padding-bottom: 19px;
        font-size: 16px;
        font-family: PingFang;
        font-weight: bold;
        color: #1e1e1e;
      }
    }
    .centenBodyLineOneCardCenter {
      margin: 0 20px;
    }
  }
  .LineOneCardTitlebody {
    display: flex;
    flex-direction: row;
    .Titlebodyleft {
      padding-top: 21px;
      padding-left: 16px;
      padding-right: 20px;
      .leftImg {
        width: 148px;
        height: 256px;
        background: url("../../../assets/images/dengta.png");
      }
    }
    .Titlebodycenter {
      padding-top: 21px;
      padding-right: 21px;
      li {
        padding-bottom: 20px;
        .valueColor {
          font-weight: 400;
          color: #0592ff;
        }
      }
    }
    .Titlebodyright {
      padding-top: 21px;
      li {
        padding-bottom: 10px;
        .valueColor {
          font-weight: 400;
          color: #0592ff;
        }
      }
    }
  }
}
</style>
